import { InputBase } from "input_base.slint";

export component Input {
    in-out property <string> text <=> input_base.text;
    // font color default white
    in property <brush> color: white;
    in property <bool> enabled <=> input_base.enabled;
    in property <bool> read_only <=> input_base.read_only;
    in property <InputType> input_type <=> input_base.input_type;
    in property <TextHorizontalAlignment> horizontal_alignment <=> input_base.horizontal_alignment;
    in property <length> font_size <=> input_base.font_size;
    out property <bool> has_focus <=> input_base.has_focus;
    in property <string> placeholder_text <=> input_base.placeholder_text;
    in property <brush> placeholder_color: gray;
    in property <image> prefix_icon;
    // suffix_icon coming soon
    // in property <image> suffix_icon;

    callback accepted <=> input_base.accepted;
    callback edited <=> input_base.edited;

    vertical-stretch: 0;
    horizontal-stretch: 1;
    min-width: max(160px, h_layout.min-width);
    min-height: max(22px, h_layout.min-height);
    forward-focus: input_base;

    // change input length and position based on icon
    states [
        prefix when prefix_icon.width != 0 && prefix_icon.height != 0: {
            input_rect.x: font_size + 6px;
            input_rect.width: self.width - input_rect.x;
        }
    ]

    if (prefix_icon.width != 0 && prefix_icon.height != 0) :Image {
        x: h_layout.padding_left;
        source: prefix_icon;
        width: font_size + 1px;
    }
    input_rect:= Rectangle {
        x: 0;
        width: parent.width - self.x;

        h_layout:= HorizontalLayout {
            input_base:= InputBase {
                selection-background-color: #007AFF4D;
                selection-foreground-color: self.color;
                placeholder-color: placeholder_color;
                color: color;
            }
        }
    }
}